<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :close-on-click-modal="false"
    title="详情"
    width="1200px"
  >
    <div class="current-row">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#F2F6FC', color: '#606266' }"
        style="width: 100%"
        stripe
        fit
        border
        tooltip-effect="dark"
      >
        <el-table-column align="center" label="主要信息">
          <el-table-column
            align="center"
            prop="customer"
            show-overflow-tooltip
            label="客户代码"/>
          <el-table-column
            align="center"
            prop="productName"
            show-overflow-tooltip
            label="产品型号"/>
          <el-table-column
            align="center"
            prop="packagingFormCode"
            show-overflow-tooltip
            label="封装形式"/>
          <el-table-column
            align="center"
            width="140px"
            show-overflow-tooltip
            prop="processSpecificationNo"
            label="工艺规范编号"/>
          <el-table-column
            align="center"
            prop="processFlow"
            show-overflow-tooltip
            label="工序号"/>
          <el-table-column
            align="center"
            prop="binNo"
            show-overflow-tooltip
            label="BinNo"/>
          <el-table-column
            align="center"
            prop="binItem"
            show-overflow-tooltip
            label="BinName"/>
        </el-table-column>
        <el-table-column align="center" label="Trend" width="260px">
          <template slot-scope="scope">
            <div :style="{width: '260px', height: '60px'}">
              <lineChart :data="scope.row.dataList"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="平均值" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.statisticalList.mean }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标准差" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.statisticalList.std }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="总计数量" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.statisticalList.count }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tab-row">
      <el-radio-group v-model="tabName" size="small" @change="tabClick">
        <el-radio-button label="binYield">Bin良率</el-radio-button>
        <el-radio-button label="Binσ">Binσ</el-radio-button>
      </el-radio-group>
    </div>
    <!-- <div class="charts-c">
      <div v-loading="chartLoadingL" class="charts-item charts-one">
        <div class="charts-item-l">
          <lineMarker :data="lineData"/>
        </div>
        <div class="charts-item-r">
          <barYCategory :data="lineBarData" :y-axle="lineData"/>
        </div>
      </div>
      <div v-loading="chartLoadingR" class="charts-item charts-one">
        <div class="charts-item-l">
          <boxplotLightVelocity :data="boxPlotData"/>
        </div>
        <div class="charts-item-r"/>
      </div>
    </div> -->
    <div class="charts-main">
      <div v-loading="chartLoadingL" class="inner-grid-l-t">
        <lineMarker
          :data="lineData"
          :datazoom-end="datazoomEnd"
          :datazoom-start="datazoomStart"
          :tab-name="tabName"
          :interval-num="intervalNum"
          :radio-value="radioValue"
        />
      </div>
      <div class="inner-grid-r-t">
        <barYCategory :data="lineBarData" :y-axle="lineData"/>
      </div>
      <div v-loading="chartLoadingR" class="inner-grid-l-b" >
        <boxplotLightVelocity :data="boxPlotData" :interval-num="intervalNum" @datazoom="setDatazoom"/>
      </div>
      <div class="chart-btns">
        <!-- <barYCategory :data="lineBarData" :y-axle="lineData"/> -->
        <div class="chart-radio">
          <!-- <el-radio-group v-model="radioValue" size="small">
            <el-radio-button label="lotId"/>
            <el-radio-button label="workOrder" />
            <el-radio-button label="custLotId"/>
          </el-radio-group> -->
          <el-select v-model="radioValue" clearable size="small">
            <el-option label="lotId" value="lotId"/>
            <el-option label="workOrder" value="workOrder"/>
            <el-option label="custLotId" value="custLotId"/>
          </el-select>
        </div>
        <div class="chart-days">
          <el-input-number v-model="intervalNum" :min="0" :precision="0" :step="1" size="small"/> 天
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import lineMarker from './lineMarker.vue'
import boxplotLightVelocity from './boxplot-light-velocity.vue'
import barYCategory from './bar-y-category.vue'
import { getLineCharts, getMixlineBarCharts, getboxPlot } from '@/api/auto-analyze-warning/charts'
import { deepCopy } from '@/utils/myTools'
import lineChart from './lineChart.vue'

export default {
  name: 'ChartModel',
  components: { lineMarker, boxplotLightVelocity, barYCategory, lineChart },
  data() {
    return {
      dialogVisible: false,
      tabName: 'binYield',
      lineData: [],
      tableData: [],
      lineBarData: {},
      boxPlotData: {},
      formRow: {},
      chartLoadingL: true,
      chartLoadingR: true,
      datazoomStart: 0,
      datazoomEnd: 35,
      intervalNum: 0,
      radioValue: ''
    }
  },
  methods: {
    handleOpen(row, isChange = true) {
      if (isChange) {
        this.formRow = deepCopy(row)
        this.tableData.push(deepCopy(row))
      }
      this.chartLoadingL = true
      this.chartLoadingR = true
      getLineCharts(this.$clearNull({
        autoAnalysisId: row.autoAnalysisResId,
        binNo: row.binNo,
        category: row.category,
        chartsDataType: this.tabName,
        rawStartTime: row.rawStartTime,
        rawEndTime: row.rawEndTime,
        calcuStartTime: row.calcuStartTime,
        calcuEndTime: row.calcuEndTime
      })).then(res => {
        const arr = res.data.map(v => v.yAxis)
        this.lineData = res.data
        return arr
      }).then(res => {
        var delta = Math.max(...res) - Math.min(...res)
        var chartmin = (Math.min(...res) - delta * 0.19)
        var chartmax = (Math.max(...res) + delta * 0.19)
        getMixlineBarCharts(this.$clearNull({
          Min: chartmin,
          Max: chartmax,
          autoAnalysisId: row.autoAnalysisResId,
          binNo: row.binNo,
          category: row.category,
          chartsDataType: this.tabName,
          rawStartTime: row.rawStartTime,
          rawEndTime: row.rawEndTime,
          calcuStartTime: row.calcuStartTime,
          calcuEndTime: row.calcuEndTime
        })).then(res => {
          this.lineBarData = res.data
          this.chartLoadingL = false
        })
      })

      // const lineData = await getLineCharts({
      //   autoAnalysisId: row.autoAnalysisResId,
      //   binNo: row.binNo,
      //   category: row.category,
      //   chartsDataType: this.tabName
      // })
      // const arr = lineData.data.map(v => v.yAxis)
      // const lineBarData = await getMixlineBarCharts({
      //   Min: Math.min(...arr),
      //   Max: Math.max(...arr),
      //   autoAnalysisId: row.autoAnalysisResId,
      //   binNo: row.binNo,
      //   category: row.category,
      //   chartsDataType: this.tabName
      // })
      // this.lineData = arr
      // this.lineBarData = lineBarData.data
      getboxPlot(this.$clearNull({
        autoAnalysisId: row.autoAnalysisResId,
        binNo: row.binNo,
        category: row.category,
        chartsDataType: this.tabName,
        rawStartTime: row.rawStartTime,
        rawEndTime: row.rawEndTime,
        calcuStartTime: row.calcuStartTime,
        calcuEndTime: row.calcuEndTime
      })).then(res => {
        this.boxPlotData = res.data
        this.chartLoadingR = false
      })
      this.dialogVisible = true
    },
    tabClick(label) {
      this.tabName = label
      this.handleOpen(this.formRow, false)
    },
    setDatazoom(params) {
      this.datazoomEnd = params.end
      this.datazoomStart = params.start
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>
<style lang="scss" scoped>
.current-row{
  margin-bottom: 20px;
}
.tab-row{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
// .charts-c{
//     width: 100%;
//     .charts-item{
//       height: 300px;
//       width: 1000px;
//     }
//     .charts-one{
//         display: flex;
//         justify-content: space-between;
//         .charts-item-l{
//             flex: 7;
//         }
//         .charts-item-r{
//             transform: rotate(90deg);
//             flex: 3;
//         }
//     }
// }
.charts-main{
width: 100%;
height: 700px;
display: grid;
grid-template-columns: 850px 300px;
grid-template-rows: 300px 400px;
.chart-btns{
  display: flex;
  align-items: flex-start;
  align-content: flex-start;
  // // justify-content: start;
  flex-wrap: wrap;
  padding-left: 40px;
  .chart-radio{
    width: 100%;
    margin-bottom: 20px;
  }
  .chart-days{
    width: 100%;
  }
}
}
.inner-grid-l-t{
width: 850px;
height: 460px;
display: inline-grid;
}
.inner-grid-r-t{
width: 300px;
height: 300px;
display: inline-grid;
transform: rotate(90deg);
}
.inner-grid-l-b{
width: 850px;
height: 400px;
margin-top: 120px;
display: inline-grid;
}
.inner-grid-r-b{
width: 300px;
height: 300px;
display: inline-grid;
transform: rotate(90deg);
}
</style>
